import 'package:flutter/material.dart';

///
/// GridView API :  https://api.flutter-io.cn/flutter/widgets/GridView-class.html
///
///
class DemoGridView extends StatelessWidget {
  const DemoGridView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSPang Flutter ListView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ListView widget'),
        ),
        body: const MyGridViewHello2(),
      ),
    );
  }
}

/// GridView 的写法一 : GridView.count
class MyGridViewHello1 extends StatelessWidget {
  const MyGridViewHello1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(20.0),
      crossAxisSpacing: 10.0,
      crossAxisCount: 3,
      children: const [
        Text("Welcome191"),
        Text("Hello2"),
        Text("你好3"),
        Text("我爱中国4"),
        Text("强大5"),
        Text("学习6"),
        Text("Flutter7"),
      ],
    );
  }
}

class MyGridViewHello2 extends StatelessWidget {
  const MyGridViewHello2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 2.0,
        crossAxisSpacing: 2.0,
        childAspectRatio: 0.7,
      ),
      children: [
        Image.network('http://img5.mtime.cn/mt/2022/09/10/094520.45469906_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/08/18/105820.75155817_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/09/08/122214.27893029_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/08/02/101608.61840129_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/08/23/141456.49828885_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/07/22/105653.83403811_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/08/25/105817.78490825_1280X720X2.jpg', fit: BoxFit.cover),
        Image.network('http://img5.mtime.cn/mt/2022/09/05/150355.93660582_1280X720X2.jpg', fit: BoxFit.cover),
      ],
    );
  }
}
